<template>
	<view class='box'>
		<view class="boxCont">
			<uni-forms ref="valiForm" :modelValue="baseForm" :rules="rules">
				<uni-forms-item label="退款原因" required name="reason">
					<uni-easyinput v-model="baseForm.reason" placeholder="请填写退款原因" />
				</uni-forms-item>
				<view class="line"></view>
				<uni-forms-item label="退款金额" required>
				</uni-forms-item>
				<view class="showPrice">
					<view class="price"> <text class="littleMon">￥</text>{{realPrice}}</view>
					<view class="tips">不可修改，最多￥{{realPrice}}，如订单包含运费，请与商家协商</view>
				</view>
			</uni-forms>
		</view>

		<view class="boxCont">
			<!-- @click="getAddress" -->
			<view class="list">
				<view class="tit">快递单号</view>
				<view class="rightAddress">
					<!-- <view class="left">
						<view class="address">{{params.address}}</view>
						<view class="info">
							<text style="margin-right: 10rpx;">{{params.name}}</text>
							<text>{{params.phone}}</text>
						</view>
					</view>
					<text class="iconfont icon-xiangyou1"></text> -->
					<view class="info">
						<text style="color: #ed6018;">
							提示: 请在商家同意退款后再返回此处填写快递单号哦~
						</text>
						<!-- <uni-easyinput v-model="baseForm.name" placeholderStyle="color:#ed6018;"
							placeholder="" disabled/> -->
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="list">
				<view class="tit">退货方式</view>
				<view class="rightAddress">
					<view class="info">
						<text>自行寄回</text>
					</view>

				</view>
			</view>
		</view>

		<view class="boxCont">
			<view class="title">补充描述和凭证</view>
			<view class="textArea">
				<uni-easyinput type="textarea" autoHeight v-model="baseForm.content" :maxlength="200" name="content"
					placeholderStyle="color: #a7a7a7;" :styles="{height:'10px'}" placeholder="补充描述，有助于商家更好的处理售后问题">
				</uni-easyinput>

				<view style="padding: 0  20rpx 20rpx 20rpx;">
					<uni-file-picker limit="1" :del-icon="true" :imageStyles="imageStyles" :list-styles="listStyles"
						file-mediatype="image" @select="imgSelect" @delete="imgDelete">
						<view class="upload">
							<text class="iconfont icon-paizhao"></text>
							<view class="" style="line-height: 20rpx;margin-top: 10rpx;}">上传凭证</view>
							<view>(最多1张)</view>
						</view>
					</uni-file-picker>
				</view>
			</view>
		</view>

		<view class="bottomBtn">
			<button class="btn" @click="sub('valiForm')">提 交</button>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				// 照片样式
				listStyles: {
					borderStyle: {
						width: 1,
						color: 'blue',
						radius: 2
					},
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
				},
				imageStyles: {
					width: 80,
					height: 80,
					border: {
						color: "#eee",
						width: 1,
						style: 'dashed',
						radius: '2px'
					}
				},


				rules: {
					reason: {
						rules: [{
							required: true,
							errorMessage: '请填写退款原因'
						}]
					},
				},
				baseForm: {},
				realPrice: '',
			}
		},
		onLoad(e) {
			console.log(e);
			let obj = JSON.parse(e.obj)
			this.baseForm = {
				...this.baseForm,
				orderNum: obj.orderNum,
				type: obj.type,
				status: obj.status,
			}
			this.realPrice = obj.realPrice
			if (obj.freightPrice) {
				this.realPrice = this.realPrice - obj.freightPrice
			}
		},
		methods: {

			// 提交
			sub(ref) {
				this.$refs[ref].validate(valid => {
					if (!valid) {
						uni.showLoading({
							title: "加载中"
						})

						this.$axios({
							url: `user/afterSale/add`,
							method: "post",
							data: this.baseForm
						}).then((res) => {
							uni.hideLoading()
							if (res.code == 0) {
								this.dingyue()
							}

						})
					}
				})
			},
			dingyue() {
				//获取订阅消息权限
				uni.requestSubscribeMessage({
					//此处填写刚才申请模板的模板ID
					tmplIds: ['2UeVneJwQh4xc2iMnBkdfJvYR6vYj0jx7L6hgadLjr4'],
					success(res) {
						uni.showToast({
							title: "申请已提交，请等待商家审核",
							icon: "none"
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "../../pages/mine/bulkOrder"
							})
						}, 500)
					}
				})
			},
			// 文件选择
			imgSelect(e) {
				let that = this
				this.baseForm.img = e.tempFilePaths[0]
				pathToBase64(this.baseForm.img)
					.then(base64 => {
						that.$set(that.baseForm, "img", base64)
					})
					.catch(error => {
						console.error(error)
					})
			},
			imgDelete(e) {
				this.baseForm.img = ''
			},




		},
	}
</script>

<style lang='scss' scoped>
	.box {
		padding: 20rpx;

		.boxCont {
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.showPrice {
				.price {
					color: #ed6018;
					font-size: 35rpx;
					font-weight: bold;
				}

				.tips {
					color: #a1a1a1;
					font-size: 28rpx;
				}
			}

			.title {
				font-weight: bold;
				font-size: 32rpx;
				margin-bottom: 20rpx;
			}

			.textArea {
				background-color: #fafafa;
				border-radius: 20rpx;
				padding-top: 20rpx;

				.upload {
					text-align: center;
					color: #a1a1a1;
					font-size: 20rpx;

					.icon-paizhao {
						font-size: 45rpx;
					}
				}
			}

			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.rightAddress {
					width: 70%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						margin-right: 10rpx;

						.address {
							font-weight: bold;
							font-size: 30rpx;
							margin-bottom: 10rpx;
						}

					}

					.info {
						text-align: right;
						font-size: 28rpx;
						color: #a5a5a5;
						width: 100%;
					}

					.icon-xiangyou1 {
						color: #a5a5a5;
					}
				}
			}
		}
	}

	.bottomBtn {
		background-color: #fff;
		padding: 10rpx 20rpx;
		width: 95%;

		.btn {
			border-radius: 100rpx;
			color: #fff;
			background: linear-gradient(to right, #fd8c02, #ff5402);
		}
	}

	.line {
		margin: 20rpx 0;

	}

	/deep/.is-input-border {
		border: none !important;
		text-align: right;
	}

	/deep/.uni-forms-item__inner {
		padding-bottom: 0 !important;
	}

	/deep/.input-padding {
		text-align: left;
	}

	/deep/.is-add {
		border: 2rpx dashed #a1a1a1 !important;
	}
</style>
